<template>
	<!-- <view> -->
	<scroll-view scroll-y="true" @scrolltolower="evaluatePull" class="evaluate-scroll-box">
		<view>
			<view class="flex-as evaluate-box" v-for="(evaluateItem,index) in 10" :key="index">
				<view class="evaluate-left-box">
					<image class="wh-100-border-r-50" src="../../../static/19.png" mode=""></image>
				</view>
				<view class="evaluate-right-box flex-as-fc">
					<text class="text-24-0f0f0f-b">她夏了夏天</text>
					<text class="text-20-808080">2021-01-26</text>
					<text class="text-24-0f0f0f">这个套装真好看，太温柔太舒服了，非常适合日常穿，上班族的最爱，不夸张不突兀，很高级的感觉</text>
					<view class="evaluate-right-img-box">
						<view v-for="(imgItem,index) in 4" :key="index">
							<u-lazy-load class="evaluate-right-img" :image="image" :loading-img="loadingImg"
								:error-img="errorImg"></u-lazy-load>
						</view>
					</view>
				</view>
			</view>
		</view>
	</scroll-view>
	<!-- </view> -->
</template>

<script>
	export default {
		data() {
			return {
				image: "https://gtd.alicdn.com/sns_logo/i1/TB124_3NXXXXXasXVXXSutbFXXX.jpg_240x240xz.jpg",
				loadingImg: '/static/uView/loading.png',
				errorImg: '/static/uView/load_error.png'
			}
		},
		methods: {
			evaluatePull() {
				console.log("下拉了")
			}
		}
	}
</script>

<style>
	page {
		height: 100%;
	}

	.evaluate-scroll-box {
		height: 100%;
		overflow: hidden;
	}

	.evaluate-box {
		margin-top: 40rpx;
	}

	.evaluate-left-box {
		height: 56rpx;
		width: 56rpx;
		margin-left: 30rpx;
	}

	.evaluate-right-box {
		flex: 1;
		margin-left: 20rpx;
		margin-right: 34rpx;
		border-bottom: 1rpx solid #E5E5E5;
	}

	.evaluate-right-box>:nth-child(2) {
		margin-top: 16rpx;
		margin-bottom: 28rpx;
	}

	.evaluate-right-img-box {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		column-gap: 20rpx;
		row-gap: 20rpx;
		margin-bottom: 34rpx;
		margin-top: 33rpx;
	}

	.evaluate-right-img {
		width: 265rpx;
		height: 317rpx;
		border-radius: 10rpx;
	}
</style>
